<template>
  <div class="certification_page">
    <div class="top_box">
      <!-- 提问题 开始 -->
      <div class="w1200 search_box">
        <div class="search_logo">
          <img
            src="@/assets/images/certification/title.png"
            class="img"
            alt="资质查查"
          />
        </div>
        <div class="menu_box">
          <nuxt-link
            class="cell"
            :class="activeId == item.id ? 'active' : ''"
            v-for="(item, index) in tabsList"
            :key="`tab_${index}`"
            :to="`/certification?type=${item.id}`"
            replace
          >
            <h1>{{ item.name }}</h1>
          </nuxt-link>
        </div>
        <div class="search_input">
          <input
            type="text"
            v-model="term"
            class="a_input"
            :placeholder="placeholder"
          />
          <nuxt-link :to="`/certification?type=${activeId}&term=${term}`" class="btn">
            查一下
          </nuxt-link>
          <!-- <el-button type="primary" class="btn" @click="searchEvent"
            >查一下</el-button
          > -->
        </div>
        <div class="hot_search">
          <div class="name">
            <img
              src="@/assets/images/certification/word.png"
              class="img"
              alt="热门搜索"
            />
          </div>
          <div class="words">
            <span
              v-for="(item, index) in hotList"
              :key="index"
              @click="chooseTerm(item)"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
      <!-- 提问题 end -->
    </div>

    <!-- 内容 开始 -->
    <div class="w1200 content mt20">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 热门医院 开始 -->
        <div class="new_question" v-if="activeId == 1">
          <h2 class="h2">热门医院</h2>
          <div class="hospital_list">
            <CerHospital
              class="mt20"
              v-for="(item, index) in hospitalList"
              :key="`hospital_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 热门医院 end -->

        <!-- 热门医生 开始 -->
        <div class="new_question" v-if="activeId == 2">
          <h2 class="h2">热门医生</h2>
          <div class="doctor_list">
            <Doctor
              class="doctor"
              size="small"
              v-for="(item, index) in doctorList"
              :key="`doctor_${index}`"
              :info="showInfo(item)"
              url="/certification/dor"
            />
          </div>
        </div>
        <!-- 热门医生 end -->

        <!-- 热门品牌 开始 -->
        <div class="new_question" v-if="activeId == 3">
          <h2 class="h2">热门品牌</h2>
          <div class="doctor_list">
            <Material
              class="doctor"
              size="small"
              v-for="(item, index) in materialList"
              :key="`doctor_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 热门品牌 end -->

        <!-- 分页 开始 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            :page-size="pageSize"
            :current-page="pageNumber"
            :total="total"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
        <!-- 分页 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 社区问题 开始 -->
        <div class="problem_box">
          <div class="head">社区问题</div>
          <div class="list_box">
            <ListQuestion
              v-for="(item, index) in questionList"
              :key="`problem_${index}`"
              :info="item"
              :index="index"
            />
          </div>
        </div>
        <!-- 社区问题 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import {
  PLATFORM_TYPE,
  GET_KEYWORDS_OPTIONS,
  GET_QUESTIONANSWER_SEARCH,
  GET_SEO_SETTING_INFO,
  GET_QUALIFICATION_HOSPITAL_SEARCH,
  GET_QUALIFICATION_DOCTOR_SEARCH,
  GET_QUALIFICATION_MATERIAL_SEARCH,
} from "@/http/interface";
import ListQuestion from "@/components/question/listCell.vue";
import CerHospital from "@/components/certification/hospital.vue";
import Doctor from "@/components/doctor/index.vue";
import Material from "@/components/material/index.vue";
export default {
  components: {
    ListQuestion,
    CerHospital,
    Doctor,
    Material,
  },
  data() {
    return {
      seoInfo: {},
      term: "",
      tabsList: [
        { name: "查医院", id: 1 },
        { name: "查医生", id: 2 },
        { name: "查材料", id: 3 },
      ],
      hotList: [],
      hospitalList: [],
      doctorList: [],
      materialList: [],
      activeId: 1,
      placeholder: "",
      pageNumber: 1,
      pageSize:10
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:'https://m.lilikq.com/inquire/certification'
                }
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/certification`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let hospitalList = [];
    let doctorList = [];
    let materialList = [];
    let oParams = { pageSize: 10 };
    let params = { type: query.type || 1 };
    let placeholder = "输入你要查询的医院简称";
    let total = 0;
    let pageSize = 10
    oParams.pageNumber = query.pageNumber || 1;
    oParams.term = query.term;

    // 医院资质
    if (!query.type || query.type == 1) {
      let h = await $axios.get(GET_QUALIFICATION_HOSPITAL_SEARCH, {
        params: oParams,
      });
      let hres = h.data || {};
      hospitalList = hres.list || [];
      placeholder = "输入你要查询的医院简称";
      total = hres.totalElements;
      pageSize = 10
    }

    // 医生资质
    if (query.type == 2) {
      let d = await $axios.get(GET_QUALIFICATION_DOCTOR_SEARCH, {
        params: {...oParams,pageSize:20},
      });
      let dres = d.data || {};
      doctorList = dres.list || [];
      console.log(doctorList);
      placeholder = "输入你要查询的医生姓名";
      total = dres.totalElements;
      pageSize = 20
    }

    // 材料资质
    if (query.type == 3) {
      let m = await $axios.get(GET_QUALIFICATION_MATERIAL_SEARCH, {
        params: {...oParams,pageSize:20},
      });
      let mres = m.data || {};
      materialList = mres.list || [];
      placeholder = "输入你要查询的材料名称";
      total = mres.totalElements;
      pageSize = 20
    }

    // 获取热门关键词
    let hot = await $axios.get(GET_KEYWORDS_OPTIONS, { params: params });
    let hotList = hot.data || [];
    if (hotList.length > 5) {
      hotList.length = 5;
    }

    // 社区问答
    let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, {
      params: { pageNumber: 1, pageSize: 10 },
    });
    let qbj = qes.data || {};
    let questionList = qbj.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 5, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      hospitalList,
      doctorList,
      materialList,
      placeholder,
      term: query.term || '',
      questionList,
      seoInfo,
      activeId: Number(query.type) || 1,
      hotList,
      total,
      pageNumber:Number(query.pageNumber || 1),
      pageSize
    };
  },
  methods: {
    // 切换分页
    changePage(e) {
      this.pageNumber = e;
      this.navigateToPage();
    },

    // 搜索
    searchEvent() {
      this.pageNumber = 1;
      this.navigateToPage();
    },

    // 切换路由
    navigateToPage() {
      //let query = this.$route.query;
      let o = { pageNumber: this.pageNumber };
      o.type = this.activeId;
      o.term = this.term||'';
      o.random = Math.random();
      let _path = `/certification?${this.$stringify(o)}`;
      //   console.log(_path);
      //this.$routerReplace(o);
        this.$router.replace({
          path: _path,
        });
    },

    // // 菜单点击事件
    // menuEvent(row) {
    //   this.activeId = row.id;
    //   //this.$routerReplace({ type: row.id,random:Math.random() })
    //     // this.$router.replace({
    //     //   query: merge(this.$route.query, { type: row.id,random:Math.random() }),
    //     // });
    // },

    // 点击关键词
    chooseTerm(row) {
      this.term = row.name;
      this.searchEvent()
    },

    // 格式化医生信息
    showInfo(row) {
      if (!row) {
        return {};
      }
      console.log(row);
      let o = JSON.parse(JSON.stringify(row));
      let params = { ...o };
      params.name = o.doctorName;
      params.logo = o.doctorLogo;
      //params.
      return params;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/certification/index.less";
</style>
  